<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Document</title>
	<style>
		.container{
			width: 400px;
			height: 300px;
			margin: 0 auto;
			background-color: #ccc;
			/* 设置弹性容器 开启弹性盒布局*/
			/* 弹性元素沿着主轴方向进行排列 */
			display: flex;
			/* 主轴方向默认是水平方向 更改主轴排列方向 */
			/* row(默认) column row-reverse column-reverse */
			flex-direction: row;
		}
		.container div{
			/* 设置弹性元素宽度 默认是auto 优先级高于width */
			/* flex-basis: auto; */
			flex-basis: 50px;
			width: 140px;
			height: 50px;
			color: white;
		}
		.div2,.div3{
			/* 剩余空间不足时也不进行等比例压缩 默认值为1 表示空间不足
				时进行等比例压缩
			*/
			flex-shrink: 0;
			/* flex-grow flex-shrink flex-basis 是flex属性的缩写 */
		}
	</style>
</head>
<body>
	<div class="container">
		<div style="background-color: red;">弹性元素1</div>
		<div class="div2" style="background-color: blue;">弹性元素2</div>
		<div class="div3" style="background-color: green;">弹性元素3</div>
	</div>
</body>
</html>